<%@page import="cn.util.Const"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>宠物用品管理系统</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="<%=Const.ROOT %>assets/images/favicon.png"/>
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/animate.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/jquery-ui.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/slick.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/chosen.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/pe-icon-7-stroke.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/magnific-popup.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/lightbox.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/js/fancybox/source/jquery.fancybox.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/jquery.scrollbar.min.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/mobile-menu.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/fonts/flaticon/flaticon.css">
    <link rel="stylesheet" href="<%=Const.ROOT %>assets/css/style.css">
</head>
<body class="productsgrid-page">
<%@include file="inc/header.jsp" %>
<div class="site-content">
    <main class="site-main  main-container no-sidebar">
        <div class="container">
            <div class="breadcrumb-trail breadcrumbs">
                <ul class="trail-items breadcrumb">
                    <li class="trail-item trail-begin">
                        <a href="">
								<span>
									首页
								</span>
                        </a>
                    </li>
                    <li class="trail-item trail-end active">
							<span>
								购物车
							</span>
                    </li>
                </ul>
            </div>
            <div class="row">
                <div class="main-content-cart main-content col-sm-12">
                    <h3 class="custom_blog_title">
                        购物车
                    </h3>
                    <div class="page-main-content">
                        <div class="shoppingcart-content">
                            <form action="shoppingcart.html" class="cart-form">
                                <table class="shop_table">
                                    <thead>
                                    <tr>
                                        <th class="product-remove"></th>
                                        <th class="product-thumbnail"></th>
                                        <th class="product-name"></th>
                                        <th class="product-price"></th>
                                        <th class="product-quantity"></th>
                                        <th class="product-subtotal"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${list }" var="v">
                                    <tr class="cart_item">
                                        <td class="product-remove">
                                            <a href="javascript:del(${v.id})" class="remove"></a>
                                        </td>
                                        <td class="product-thumbnail">
                                            <a href="#">
                                                <img src="<%=Const.ROOT %>images/${v.goods.pic}" alt="img"
                                                     class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image">
                                            </a>
                                        </td>
                                        <td class="product-name" data-title="Product">
                                            <a href="#" class="title">${v.goods.name}</a>
                                            <span class="attributes-select attributes-color">${v.goods.price}</span>
                                        </td>
                                        <td class="product-quantity" data-title="Quantity">
                                            <div class="quantity">
                                                <div class="control">
                                                    <a class="btn-number qtyminus quantity-minus" href="">-</a>
                                                    <input type="text" data-step="1" data-min="0" data-id="${v.id}" value="${v.quantity}" title="Qty"
                                                           class="input-qty qty" size="4">
                                                    <a href="" class="btn-number qtyplus quantity-plus">+</a>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="product-price" data-title="Price">
													<span class="woocommerce-Price-amount amount">
														<span class="woocommerce-Price-currencySymbol">
															￥
														</span>
														${v.price}
													</span>
                                        </td>
                                    </tr>
                                    </c:forEach>
                                    <tr>
                                        <td class="actions">
                                            <div class="order-total">
														<span class="title">
															总价格:
														</span>
                                                <span class="total-price">
															￥${total }
														</span>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </form>
                            <div class="control-cart">
                                <a class="button btn-continue-shopping" href="<%=Const.ROOT%>index">
                                    继续购物
                                </a>
                                <a class="button btn-cart-to-checkout" href="<%=Const.ROOT%>pay.jsp?total=${total}">
                                    结算
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
<%@include file="inc/footer.jsp" %>
<script src="<%=Const.ROOT %>assets/js/jquery-1.12.4.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery.plugin-countdown.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery-countdown.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/bootstrap.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/owl.carousel.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/magnific-popup.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/isotope.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery.scrollbar.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery-ui.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/mobile-menu.js"></script>
<script src="<%=Const.ROOT %>assets/js/chosen.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/slick.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery.elevateZoom.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery.actual.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/fancybox/source/jquery.fancybox.js"></script>
<script src="<%=Const.ROOT %>assets/js/lightbox.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/owl.thumbs.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/jquery.scrollbar.min.js"></script>
<script src="<%=Const.ROOT %>assets/js/frontend-plugin.js"></script> 
<script>
function addCart(){
	var quantity=$("#quantity").val();
	$.getJSON("<%=Const.ROOT %>carts",{"action":"add","quantity":quantity,"gid":'${goods.id}'},function(data){
		console.log(data);
		if(data.code==200){
			alert("添加成功!");
		}
	});
}	
function updateCarts(cid,val){
	$.getJSON("<%=Const.ROOT %>carts",{"action":"update","quantity":val,"id":cid},function(data){
		if(data.code==200){
			location.reload();
		}
	});
}
function del(id){
	if(confirm("是否删除?")){
		$.getJSON("<%=Const.ROOT %>carts",{"action":"delete","id":id},function(data){
			if(data.code==200){
				location.reload();
			}
		});
	}
}
</script>
</body>
</html>